<template>
  <div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="60%" @close="cancel">
      <el-table
          ref="tableRef"
          :data="tableDataAll"
          style="width: 100%;margin-bottom: 20px;"
          row-key="wbsId"
          border
          default-expand-all
          @select="handleChange"
          @selection-change="handleSelectionChange"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            type="selection"
            width="55"> <!--:selectable="handleSelectable"-->
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script >
export default {
  data(){
    return{
      dialogVisible:false,
      tableDataAll:[],
     //  tableDataAll: [{
     //   wbsId: 3,
     //   date: '2016-05-01',
     //   name: '王小虎3',
     //   parentId:0,
     //   address: '上海市普陀区金沙江路 1519 弄',
     //   children: [{
     //     wbsId: 31,
     //     parentId:3,
     //     date: '2016-05-01',
     //     name: '王小虎31',
     //     address: '上海市普陀区金沙江路 1519 弄',
     //     estimate:''
     //   }, {
     //     wbsId: 32,
     //     parentId:3,
     //     date: '2016-05-01',
     //     name: '王小虎32',
     //     address: '上海市普陀区金沙江路 1519 弄',
     //     estimate:''
     //   }, {
     //     wbsId: 33,
     //     parentId:3,
     //     date: '2016-05-01',
     //     name: '王小虎33',
     //     address: '上海市普陀区金沙江路 1519 弄',
     //     estimate:'',
     //     children: [{
     //       wbsId: 331,
     //       parentId:33,
     //       date: '2016-05-01',
     //       name: '王小虎331',
     //       address: '上海市普陀区金沙江路 1519 弄',
     //       children: [{
     //         wbsId: 3311,
     //         parentId: 331,
     //         date: '2016-05-01',
     //         name: '3311',
     //         address: '上海市普陀区金沙江路 1519 弄',
     //         estimate:'',
     //       },{
     //           wbsId: 3312,
     //           parentId: 331,
     //           date: '2016-05-01',
     //           name: '3312',
     //           address: '上海市普陀区金沙江路 1519 弄',
     //           estimate:'',
     //         }]
     //     }, {
     //       wbsId: 332,
     //       parentId:33,
     //       date: '2016-05-01',
     //       name: '王小虎332',
     //       address: '上海市普陀区金沙江路 1519 弄',
     //       estimate:'',
     //     }, {
     //       wbsId: 333,
     //       parentId:33,
     //       date: '2016-05-01',
     //       name: '王小虎333',
     //       address: '上海市普陀区金沙江路 1519 弄',
     //       estimate:'',
     //     }]
     //   }, {
     //       wbsId: 44,
     //       parentId:3,
     //       date: '2016-05-01',
     //       name: '王小虎44',
     //       address: '上海市普陀区金沙江路 1519 弄',
     //       estimate:'',
     //       children: [{
     //         wbsId: 441,
     //         parentId:44,
     //         date: '2016-05-01',
     //         name: '王小虎441',
     //         address: '上海市普陀区金沙江路 1519 弄',
     //         estimate:'',
     //       }, {
     //         wbsId: 442,
     //         parentId:44,
     //         date: '2016-05-01',
     //         name: '王小虎442',
     //         address: '上海市普陀区金沙江路 1519 弄',
     //         estimate:'',
     //       }, {
     //         wbsId: 443,
     //         parentId:44,
     //         date: '2016-05-01',
     //         name: '王小虎443',
     //         address: '上海市普陀区金沙江路 1519 弄',
     //         estimate:'',
     //       }]
     //     }]
     // },{
     //   wbsId: 100,
     //   date: '2016-05-01',
     //   name: '王小虎100',
     //   parentId:0,
     //   address: '上海市普陀区金沙江路 1519 弄',
     //   children: [{
     //     wbsId: 101,
     //     parentId:100,
     //     date: '2016-05-01',
     //     name: '王小虎101',
     //     address: '上海市普陀区金沙江路 1519 弄',
     //     estimate:''
     //   }, {
     //     wbsId: 102,
     //     parentId:100,
     //     date: '2016-05-01',
     //     name: '王小虎102',
     //     address: '上海市普陀区金沙江路 1519 弄',
     //     estimate:''
     //   }]}
     // ],
      multipleSelection:[],
      tableDataresultId:[],
    }
  },
  created() {
  },
  methods:{
      init(tableDataresult ,tableDataOrigin){
        this.tableDataAll = tableDataOrigin ;
        this.getResultid(tableDataresult);
        this.dialogVisible = true ;
        this.$nextTick(()=>{
          this.$refs.tableRef.clearSelection();
          this.selectTreeData(this.tableDataAll)
        })
      },

      selectTreeData(tableData){
        tableData.map(row => {
          if(this.tableDataresultId.includes(row.wbsId)){
            this.$nextTick(()=>{
              this.$refs.tableRef.toggleRowSelection(row);
            })
          }
          if (row.children){
            this.selectTreeData(row.children)
          }
        });
      },

      getResultid(tableDataresult){
        tableDataresult.map(r=>{
          if (r.children){
            this.tableDataresultId.push(r.wbsId)
            this.getResultid(r.children)
          }else{
            this.tableDataresultId.push(r.wbsId)
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    submit(){
      let arr = JSON.parse(JSON.stringify(this.multipleSelection))
        arr.forEach(item=>
        {
          Vue.delete(item,'children')
        })
      this.$emit('sendSelectRow', arr)
      this.cancel()
    },


    cancel(){
      this.multipleSelection = []
      this.tableDataresultId = []
      this.dialogVisible = false ;
      // this.$emit('close',close)
    },
    handleChange(selection,row){
      const rows = []
      rows.push(row)
      const ids = this.getRowChildIds(rows,[])
      if(this.tableDataresultId.includes(row.wbsId)){
        ids.forEach(wbsId => {
          this.tableDataresultId = this.tableDataresultId.filter(i => i !== wbsId);
        });
      }else{
        const pIds = this.getRowParentIds(this.tableDataAll,row.wbsId,[],0)
        pIds.forEach(wbsId => {
          if(!ids.includes(wbsId) && wbsId!=0){
            ids.push(wbsId)
          }
        })
        ids.forEach(wbsId => {
          if(!this.tableDataresultId.includes(wbsId)){
            this.tableDataresultId.push(wbsId)
          }
        });
      }
      this.$nextTick(()=>{
        this.$refs.tableRef.clearSelection();
        this.selectTreeData(this.tableDataAll)
      })
    },

    getRowChildIds(row,ids){
      row.map(r=>{
          if (r.children){
            ids.push(r.wbsId)
            this.getRowChildIds(r.children,ids)
          }else{
            ids.push(r.wbsId)
          }
      })
      return ids
    },
    getRowParentIds(tableData,id,ids,pid){
      tableData.map(r=>{
          if(r.wbsId == id ){
            if(!ids.includes(pid)){
              ids.push(pid)
            }
            this.getRowParentIds(this.tableDataAll,pid,ids,0)
          }else{
            if (r.children){
              this.getRowParentIds(r.children,id,ids,r.wbsId)
            }
          }
      })
      return ids
    },


    handleSelectable(row, index) {
      // 如果状态不等于 '0'，则不允许选择
      return !row.disabled;
    },

  }
}
</script>

<style scoped>

</style>
